import Image from 'next/image';
import { Heading } from '@/components/heading';
import { Text } from '@/components/text';

const PrimitivesSection = () => {
  return (
    <section className="relative md:my-40 md:py-20 space-y-16 max-md:px-6">
      <div className="flex flex-col gap-4">
        <Heading size="8" weight="medium" className="text-white/80">
          Battle-tested Primitives
        </Heading>
        <Text size="5" className="opacity-70">
          All components are tested on the most popular email clients.
        </Text>
      </div>
      <div className="grid grid-cols-3 md:grid-cols-6 gap-6 lg:gap-16 lg:max-w-4xl">
        {items.map((item, index) => (
          <div
            key={index}
            className="flex flex-col items-center justify-center gap-3"
          >
            <div className="flex items-center w-20 h-20 shrink-0 grow justify-center bg-gradient-to-b from-zinc-800 to-zinc-950 rounded-[18px] shadow-[0px_32px_64px_-16px_transparent,0px_16px_32px_-8px_transparent,0px_8px_16px_-4px_transparent,0px_4px_8px_-2px_transparent,0px_-8px_16px_-1px_transparent,0px_2px_4px_-1px_transparent,0px_0px_0px_1px_transparent,inset_0px_0px_0px_1px_rgba(255,255,255,0.1),inset_0px_1px_0px_rgb(255,255,255,0.15)]">
              {item.icon}
            </div>
            <Text
              size="3"
              className="text-gradient opacity-90 font-[460] tracking-tight"
            >
              {item.title}
            </Text>
          </div>
        ))}
      </div>
      <Image
        alt=""
        className="pointer-events-none absolute sm:-translate-x-48 -top-20 z-[3] scale-110 select-none mix-blend-lighten"
        fill
        priority
        src="/static/bg.png"
      />
    </section>
  );
};

const Icons = {
  gmail: () => (
    <svg
      width="39"
      height="40"
      viewBox="0 0 514 387"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M428.918 11.4911C463.78 -14.6471 513.5 10.2281 513.5 53.7821V350.509C513.5 370.072 497.654 385.918 478.091 385.918H396.136V385.418L396.135 188.599L257.3 292.727L257 292.952L256.7 292.727L117.864 188.599V385.918H36.4102V385.92H35.9102C16.346 385.92 0.5 370.073 0.5 350.51V53.7802C0.5 10.2282 50.2204 -14.6471 85.082 11.4911L117.664 35.9266L257 140.43L396.336 35.9266L428.918 11.4911Z"
        fill="#AFAFAF"
        stroke="#fff"
      />
    </svg>
  ),
  apple_mail: () => (
    <svg
      width="39"
      height="40"
      viewBox="0 0 517 328"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M35.0966 0C30.9999 0 27.1405 0.706644 23.4877 2.15967L96.6507 77.4782L170.624 154.147L171.973 155.766L174.133 157.926L176.293 160.086L180.613 164.675L244.056 229.735C245.113 230.392 248.174 233.227 250.565 234.422C253.646 235.962 256.985 237.381 260.427 237.504C264.141 237.637 267.937 236.573 271.279 234.948C273.782 233.73 274.895 231.985 277.803 229.735L351.236 153.877L425.479 77.4782L497.022 3.77942C492.429 1.29096 487.342 0 481.903 0H35.0966ZM12.6888 9.1786C4.88661 16.5709 0 27.6841 0 40.2239V287.506C0 297.66 3.26128 306.883 8.63916 313.962L18.8982 304.244L95.3008 230.005L163.064 164.405L161.714 162.785L87.4715 86.3868L13.2287 9.71852L12.6888 9.1786ZM506.741 11.6082L434.388 86.3868L360.415 162.785L359.065 164.135L429.528 232.435L505.931 306.673L510.521 310.993C514.634 304.392 517 296.262 517 287.506V40.2239C517 29.043 513.125 18.904 506.741 11.6082ZM171.703 173.314L104.21 238.914L27.5373 313.152L17.8183 322.601C22.9421 325.9 28.7731 328 35.0966 328H481.903C489.506 328 496.401 325.076 502.151 320.441L497.292 315.582L420.619 241.343L350.156 173.314L286.712 238.644C283.279 240.92 280.984 243.445 277.631 244.995C272.235 247.49 266.321 249.601 260.376 249.51C254.416 249.418 248.572 247.086 243.223 244.455C240.538 243.134 239.107 241.822 235.957 239.184L171.703 173.314Z"
        fill="#AFAFAF"
      />
    </svg>
  ),
  outlook: () => (
    <svg
      width="49"
      height="40"
      viewBox="0 0 587 565"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M507.099 35.3125H203.607C197.034 35.3125 190.729 37.9242 186.081 42.5731C181.433 47.222 178.822 53.5273 178.822 60.1019V88.2812L349.88 141.25L531.884 88.2812V60.1019C531.884 53.5273 529.272 47.222 524.624 42.5731C519.976 37.9242 513.672 35.3125 507.099 35.3125Z"
        fill="#71717A"
      />
      <path
        d="M561.011 307.307C563.597 299.178 565.661 290.892 567.19 282.5C567.187 280.438 566.643 278.413 565.611 276.628C564.579 274.843 563.096 273.361 561.311 272.33L561.082 272.189L561.011 272.153L369.687 163.144C368.862 162.608 368.007 162.119 367.127 161.678C363.468 159.861 359.438 158.916 355.353 158.916C351.267 158.916 347.237 159.861 343.578 161.678C342.699 162.113 341.844 162.596 341.018 163.126L149.694 272.171L149.624 272.206L149.412 272.30C147.623 273.359 146.137 274.84 145.102 276.625C144.067 278.41 143.52 280.436 143.516 282.5C145.045 290.892 147.109 299.178 149.694 307.307L352.564 455.708L561.011 307.307Z"
        fill="#52525B"
      />
      <path
        d="M425.965 88.2812H302.394L266.717 141.25L302.394 194.219L425.965 300.156H531.884V194.219L425.965 88.2812Z"
        fill="#3F3F46"
      />
      <path
        d="M178.822 88.2812H302.394V194.219H178.822V88.2812Z"
        fill="#71717A"
      />
      <path
        d="M425.965 88.2812H531.884V194.219H425.965V88.2812Z"
        fill="#27272A"
      />
      <path
        d="M425.965 300.156L302.394 194.219H178.822V300.156L302.394 406.094L493.612 437.31L425.965 300.156Z"
        fill="#71717A"
      />
      <path
        d="M302.394 194.219H425.965V300.156H302.394V194.219Z"
        fill="#71717A"
      />
      <path
        d="M178.822 300.156H302.394V406.094H178.822V300.156Z"
        fill="#52525B"
      />
      <path
        d="M425.965 300.156H531.884V406.094H425.965V300.156Z"
        fill="#71717A"
      />
      <path
        opacity="0.5"
        d="M358.707 445.255L150.524 293.412L159.262 278.051C159.262 278.051 348.945 386.107 351.84 387.731C353.024 388.205 354.294 388.431 355.569 388.395C356.844 388.358 358.099 388.06 359.254 387.519L552.255 277.521L561.011 292.864L358.707 445.255Z"
        fill="#52525B"
      />
      <path
        d="M561.311 292.688L561.064 292.829L561.011 292.864L369.687 401.874C365.887 404.324 361.522 405.759 357.01 406.04C352.497 406.322 347.988 405.44 343.914 403.481L410.536 492.839L556.245 524.567V524.638C559.634 522.186 562.394 518.964 564.296 515.238C566.199 511.512 567.19 507.387 567.19 503.203V282.5C567.19 284.565 566.648 286.593 565.616 288.382C564.584 290.17 563.099 291.655 561.311 292.688Z"
        fill="#3F3F46"
      />
      <path
        d="M149.694 292.917V292.741H149.518L148.988 292.387C147.301 291.352 145.91 289.897 144.951 288.164C143.992 286.432 143.498 284.48 143.516 282.5V503.203C143.511 506.682 144.193 510.128 145.522 513.344C146.851 516.559 148.801 519.481 151.261 521.941C153.721 524.401 156.642 526.352 159.857 527.681C163.071 529.01 166.517 529.692 169.995 529.688H540.71C542.916 529.666 545.11 529.369 547.242 528.805C548.348 528.612 549.419 528.255 550.419 527.745C550.794 527.709 551.156 527.588 551.478 527.392C552.923 526.801 554.288 526.03 555.539 525.097C555.892 524.92 556.068 524.92 556.245 524.567L149.694 292.917Z"
        fill="#3F3F46"
      />
      <path
        d="M25.8228 141.25H261.209C267.45 141.25 273.435 143.73 277.848 148.143C282.261 152.557 284.74 158.544 284.74 164.786V400.214C284.74 406.456 282.261 412.443 277.848 416.857C273.435 421.27 267.45 423.75 261.209 423.75H25.8228C19.5819 423.75 13.5965 421.27 9.18349 416.857C4.77047 412.443 2.29126 406.456 2.29126 400.214L2.29126 164.786C2.29126 158.544 4.77047 152.557 9.18349 148.143C13.5965 143.73 19.5819 141.25 25.8228 141.25Z"
        fill="#71717A"
      />
      <path
        d="M70.5557 237.794C76.8084 224.466 86.9029 213.312 99.5421 205.766C113.545 197.749 129.489 193.753 145.617 194.219C160.55 193.895 175.286 197.682 188.213 205.166C200.383 212.415 210.183 223.046 216.423 235.764C223.221 249.782 226.608 265.21 226.309 280.787C226.636 297.058 223.147 313.179 216.123 327.859C209.747 341.03 199.651 352.042 187.084 359.534C173.649 367.257 158.354 371.147 142.863 370.781C127.601 371.145 112.532 367.316 99.2949 359.711C87.0286 352.449 77.1126 341.808 70.7322 329.06C63.8879 315.248 60.4555 299.996 60.7229 284.583C60.4269 268.445 63.7886 252.448 70.5557 237.794ZM101.449 312.975C104.78 321.4 110.429 328.71 117.742 334.056C125.195 339.273 134.122 341.965 143.216 341.737C152.903 342.114 162.45 339.331 170.419 333.809C177.651 328.465 183.157 321.117 186.254 312.675C189.727 303.268 191.438 293.303 191.303 283.277C191.41 273.156 189.799 263.09 186.536 253.508C183.658 244.889 178.349 237.286 171.249 231.615C163.49 225.815 153.971 222.866 144.293 223.263C135.001 223.028 125.874 225.742 118.219 231.014C110.762 236.37 104.982 243.737 101.555 252.255C93.9718 271.783 93.9277 293.434 101.431 312.992L101.449 312.975Z"
        fill="#FAFAFA"
      />
    </svg>
  ),
  yahoo_mail: () => (
    <svg
      width="49"
      height="40"
      viewBox="0 0 426 379"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M0 92.2646H81.2458L128.555 213.386L176.48 92.2646H255.577L136.47 379H56.8583L89.4647 303.02L0.00284976 92.2646H0ZM347.69 189.043H259.093L337.727 0L426 0.00427781L347.69 189.043ZM282.302 207.137C309.485 207.137 331.52 229.19 331.52 256.389C331.52 283.589 309.485 305.642 282.302 305.642C255.121 305.642 233.089 283.589 233.089 256.389C233.089 229.19 255.124 207.137 282.302 207.137Z"
        fill="#AFAFAF"
      />
    </svg>
  ),
  hey: () => (
    <svg
      width="49"
      height="40"
      viewBox="0 0 374 406"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M315.059 113.308C298.003 117.925 282.535 127.121 270.332 139.901C256.122 89.9628 225.502 14.3792 195.644 2.03C192.49 0.558907 189.029 -0.132175 185.552 0.015033C182.075 0.162241 178.684 1.14342 175.666 2.87583C156.99 13.7532 144.827 48.7031 155.467 114.932C114.428 39.8049 100.099 39.9233 93.4847 39.8049C90.3024 39.8484 87.2038 40.8299 84.5768 42.6263C81.9498 44.4228 79.9112 46.9544 78.7164 49.9042C74.2673 59.7835 65.3522 90.6057 87.0733 156.936C60.9201 121.123 52.8847 116.556 43.6482 117.013C40.6989 117.186 37.8513 118.153 35.4065 119.812C32.9617 121.47 31.0106 123.759 29.7596 126.435C21.9272 141.203 22.8238 178.335 47.133 233.687C38.792 226.341 28.2348 221.994 17.1397 221.338C14.1581 221.547 11.2762 222.499 8.75603 224.106C6.23589 225.714 4.1575 227.925 2.70983 230.54C-7.1695 248.692 13.5703 299.611 39.1991 334.138C59.9558 362.473 101.52 406 161.879 406C170.331 405.989 178.764 405.19 187.068 403.615C189.948 403.054 192.488 401.372 194.128 398.939C195.768 396.505 196.374 393.52 195.814 390.64C195.253 387.759 193.571 385.22 191.137 383.579C188.704 381.939 185.719 381.333 182.839 381.894C132.681 391.672 94.8718 364.097 71.9836 339.348C37.795 302.301 22.7899 257.81 21.9272 244.243C29.0998 247.169 49.7382 259.332 89.8983 310.793C91.5965 313.169 94.1688 314.772 97.0495 315.251C99.9301 315.73 102.883 315.046 105.259 313.347C107.634 311.649 109.238 309.077 109.717 306.196C110.196 303.316 109.511 300.363 107.813 297.987C51.3622 212.287 45.8304 160.421 47.6743 142.929C64.2865 159.846 105.749 221.947 136.994 268.873C138.534 271.28 140.96 272.982 143.747 273.613C146.533 274.243 149.456 273.75 151.881 272.24C154.366 270.809 156.184 268.452 156.938 265.686C157.692 262.919 157.322 259.966 155.907 257.472C90.778 138.04 93.0448 83.7713 96.8342 65.5352C106.595 75.4145 132.528 109.823 187.169 228.375C188.336 230.979 190.481 233.019 193.14 234.054C195.799 235.089 198.759 235.036 201.379 233.907C204.048 232.863 206.197 230.807 207.356 228.187C208.516 225.566 208.593 222.594 207.571 219.917C154.588 76.0573 177.594 27.3204 186.391 21.7887C197.793 21.7887 229.816 76.7171 249.795 148.697C250.979 153.147 252.18 157.494 253.263 161.723C250.46 166.648 248.273 171.897 246.75 177.354C235.923 217.193 225.046 307.613 245.988 332.48C248.072 335.088 250.769 337.14 253.84 338.45C256.91 339.761 260.257 340.291 263.582 339.991C267.787 339.534 271.839 338.148 275.443 335.933C279.047 333.718 282.115 330.73 284.423 327.185C303.877 298.85 292.459 227.732 276.929 165.513C287.509 150.566 302.801 139.604 320.354 134.386C324.105 133.202 328.108 133.06 331.934 133.975C335.76 134.889 339.265 136.827 342.075 139.579C350.973 149.56 366.52 186.912 319.407 318.608C318.614 321.322 318.89 324.235 320.178 326.751C321.466 329.267 323.669 331.195 326.333 332.139C328.997 333.082 331.922 332.971 334.506 331.826C337.091 330.682 339.139 328.591 340.231 325.984C377.786 220.999 383.673 153.366 358.569 124.913C353.11 119.129 346.146 114.982 338.46 112.938C330.774 110.894 322.67 111.034 315.059 113.342V113.308ZM266.204 314.921C265.393 316.379 264.084 317.496 262.516 318.067C254.396 308.408 254.396 251.196 263.277 204.269C280.109 285.384 270.332 309.169 266.204 314.921Z"
        fill="#AFAFAF"
      />
    </svg>
  ),
  superhuman: () => (
    <svg
      width="49"
      height="40"
      viewBox="0 0 353 416"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M260.75 197.25L345 260.25M345 260.25L176.5 407.25L8 260.25L92.25 197.25M345 260.25H176.5M176.5 260.25L8 134.25L176.5 8.25L345 134.25L176.5 260.25Z"
        stroke="#AFAFAF"
        strokeWidth="16"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  ),
};

const items = [
  {
    icon: <Icons.gmail />,
    title: 'Gmail',
  },
  {
    icon: <Icons.apple_mail />,
    title: 'Apple Mail',
  },
  {
    icon: <Icons.outlook />,
    title: 'Outlook',
  },
  {
    icon: <Icons.yahoo_mail />,
    title: 'Yahoo! Mail',
  },
  {
    icon: <Icons.hey />,
    title: 'HEY',
  },
  {
    icon: <Icons.superhuman />,
    title: 'Superhuman',
  },
];

export default PrimitivesSection;
